﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div
        {
            width: 200px;
            height: 200px;
            background-color: Black;
        }
        .red
        {
            background-color: Red;
        }
        .yellow
        {
            background-color: Yellow;
        }
        .large
        {
            width: 400px;
            height: 400px;
        }
        .small
        {
            width: 100px;
            height: 100px;
        }
    </style>
    <script src="Common.js" type="text/javascript"></script>
    <script type="text/javascript">

        BindEvent(window, "load", function (e) {

            BindEvent("btnColor", "click", function (e) {
                Get("divShow").style.backgroundColor = Get("txtColor").value;
            });

//            BindEvent("btnRed", "click", function (e) {
//                //Get("divShow").className = "red";
//                Get("divShow").setAttribute("class", "red");
//            });

            BindEvent("btnRed", "click", function (e) {
                //Get("divShow").className = "yellow";
                ChangeClass(Get("divShow"), "yellow", "red");
            });

            BindEvent("btnYellow", "click", function (e) {
                ChangeClass(Get("divShow"), "red", "yellow");
            });

            BindEvent("btnLarge", "click", function (e) {
                ChangeClass(Get("divShow"), "small", "large");
            });

            BindEvent("btnSmall", "click", function (e) {
                ChangeClass(Get("divShow"), "large", "small");
            });

        });


    </script>
</head>
<body>
    <input id="btnLarge" type="button" value="Large" />
    <input id="btnSmall" type="button" value="Small" />
    <input id="btnRed" type="button" value="Red" />
    <input id="btnYellow" type="button" value="Yellow" />
    <input id="btnColor" type="button" value="backgroundColor" />
    <input id="txtColor" type="text" />
    <div id="divShow">
    </div>
</body>
</html>
